<template>
  <div class="user">
    <div class="user-header">
      <div class="left">
        <div class="left-zuo" @click="tohome">
          <img src="./image/user.png" alt="" />
        </div>

        <div class="info">
          <p>用户66363663</p>
          <div class="membershiplevel">
            <span>普通用户</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="part1">
          <img src="./image/erweima.png" alt="" />
        </div>
        <div class="part2">
          <div class="part2-img">
            <img src="./image/shandian.png" alt="" />
          </div>
          <div class="part2-text">
            <p>Pro会员</p>
            <p>立即开通</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间部分 -->
    <div class="m-myasset">
      <div class="tt">我的资产</div>
      <div>
        <div class="myset-list">
          <div class="list-item">
            <span>￥0</span>
            <span>余额</span>
          </div>
          <div class="list-item">
            <span>￥0</span>
            <span>红包</span>
          </div>
          <div class="list-item">
            <span>￥0</span>
            <span>优惠券</span>
          </div>
          <div class="list-item">
            <span>￥0</span>
            <span>积分</span>
          </div>
          <div class="list-item">
            <span>￥0</span>
            <span>礼品卡</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三部分 -->
    <van-grid class="card">
      <div class="div-card">
        <van-grid-item icon="coupon-o" text="我的订单" />
      </div>
      <div class="div-card">
        <van-grid-item icon="friends-o" text="账号管理" />
      </div>
      <div class="div-card">
        <van-grid-item icon="desktop-o" text="我的手机号" />
      </div>
      <div class="div-card">
        <van-grid-item icon="underway-o" text="周六一起拼" />
      </div>
      <div class="div-card">
        <van-grid-item icon="gift-o" text="售后服务" />
      </div>
      <div class="div-card">
        <van-grid-item icon="gold-coin-o" text="邀请返利" />
      </div>
      <div class="div-card">
        <van-grid-item icon="shop-o" text="优先购" />
      </div>
      <div class="div-card">
        <van-grid-item icon="balance-list-o" text="积分中心" />
      </div>
      <div class="div-card">
        <van-grid-item icon="gem-o" text="会员俱乐部" />
      </div>
      <div class="div-card">
        <van-grid-item icon="location-o" text="地址管理" />
      </div>
      <div class="div-card">
        <van-grid-item icon="certificate" text="支付安全" />
      </div>
      <div class="div-card">
        <van-grid-item icon="phone-circle-o" text="帮助与客服" />
      </div>
      <div class="div-card">
        <van-grid-item icon="photo-o" text="意见反馈" />
      </div>
      <div class="div-card">
        <van-grid-item icon="new-arrival-o" text="我的竞拍" />
      </div>
    </van-grid>
    <div class="button22">
      <van-button
        type="default"
        size="large"
        style="margin-top: 20px; margin-bottom: 10px"
        @click="loginouy"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script  lang="ts">
export default {
  name: "user",
};
</script>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { loginout } from "@/api/user";
import { userlogin } from "@/store/user";
const userlogin1 = userlogin();
const router = useRouter();
function tohome() {
  router.push("/home");
}
const loginouy = async () => {
  const res = await loginout();
  if (res.code === 200) {
    localStorage.removeItem("name");
    localStorage.removeItem("token");
    // clearuserinfo();
    userlogin1.userInfo.name = "";
    userlogin1.userInfo.token = "";
    console.log(userlogin1.userInfo.name, 222);
    console.log(userlogin1.userInfo.token, 333);
    setTimeout(() => {
      router.push("/home");
    }, 400);
  }
};
</script>




<style scoped lang="less">
.user {
  // position: fixed;
  // top: 200px;
  left: 0;
  bottom: 51px;
  margin-bottom: 70px;
  overflow: scroll-y;
  background-color: #eeeeee;
}

.user-header {
  width: 375px;
  height: 135px;
  background-color: #f6d189;
  overflow: hidden;
  .left {
    width: 240px;
    height: 71px;
    // background-color: blue;
    float: left;
    margin-left: 10px;
    margin-top: 32px;
    .left-zuo {
      float: left;
      img {
        width: 71px;
        height: 71px;
        border-radius: 50%;
      }
    }
    .info {
      float: right;
      // background-color: pink;
      width: 155px;
      height: 100%;
      margin: 0;
      overflow: hidden;
      p {
        height: 20px;
        font-size: 19px;
        color: white;
        margin: 0;
        margin-top: 15px;
      }
      .membershiplevel {
        height: 18px;
        margin-top: 10px;
        span {
          color: white;
          font-size: 14px;
          margin-left: 2px;
        }
      }
    }
  }
  .right {
    width: 119px;
    height: 94px;
    // background-color: yellow;
    float: left;
    margin-top: 22px;
    .part1 {
      width: 24px;
      height: 24px;
      // background-color: brown;
      margin-top: 20px;
      margin-left: 80px;
      img {
        width: 24px;
        height: 24px;
      }
    }
    .part2 {
      width: 120px;
      height: 42px;
      position: relative;
      background-color: #443d36;
      float: right;
      left: 30px;
      border-radius: 21px;
      margin-top: 10px;
      overflow: hidden;
      .part2-img,
      img {
        width: 28px;
        height: 28px;
        float: left;
        margin-top: 5px;
        margin-left: 3px;
      }
      .part2-text {
        float: right;
        margin: 0;
        padding: 0;
        position: relative;
        left: -36px;
        p {
          margin: 0;
          padding: 0;
          margin-top: 3px;
          color: #f9c57f;
        }
      }
    }
  }
}
//2 中间部分样式
.m-myasset {
  width: 375px;
  height: 142px;
  // background-color: red;
  .tt {
    width: 365px;
    height: 52px;
    // background-color: pink;
    margin: 0 auto;
    line-height: 52px;
    padding-left: 10px;
    background-color: white;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
  }
  .myset-list {
    width: 100%;
    height: 70px;
    // background-color: brown;
    background-color: white;
    display: flex;
    justify-content: space-evenly;
    .list-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      span {
        padding: 5px 0;
        font-size: 15px;
      }
    }
  }
}
// 第三部分
.card {
  width: 375px;

  // background-color: green;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  .div-card {
    width: 122px;
    // height: 86px;
    // background-color: pink;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 0;
  }
}
</style>